<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>

</head>

<body>
    <!--这是我们的View-->
    <div id="app">

        <m-card :url="url" :todo="sites"></m-card>

    </div>


    <script src="https://cdn.bootcss.com/vue/2.5.17/vue.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

    <script>
        Vue.component('m-card', {
            props: ['todo', 'url'],
            template: `
                <table>
                    <tr v-for="item in todo" :url="123">
                        <td>{{item.text}}</td>    
                    </tr> 
                </table>
            `,
            data: function () {
                return {}
            },
            mounted: function () {
                var that = this;
                $.get(that.url, function (res) {
                    that.todo = res;
                })

            }
        })
        new Vue({
            el: '#app',
            data: {
                url:'http://localhost:81/abc/1.js',
                sites: [
                    { text: 'Runoob' },
                    { text: 'Google' },
                    { text: 'Taobao' }
                ]
            }
        })
    </script>

</body>

</html>